<template>
  <!-- 船厂对外展示页 -->
  <div
    class="shipyard"
    v-if="info"
  >
    <div class="head">
      <div class="g-con">
        <div class="banner">
          <img :src="info.backgroundImage" />
        </div>
        <div class="flexsb">
          <div class="flexsc">
            <div class="head-portrait mr-2">
              <img :src="info.enterpriseLogo" />
            </div>
            <div class="name">{{ info.enterpriseName }}</div>
          </div>
          <div class="flexec btn">
            <el-button
              type="primary"
              @click="handelSendMsg"
            >
              {{ t('member.b1') }}
            </el-button>
          </div>
        </div>
      </div>
    </div>
    <div class="main">
      <div class="g-con">
        <div class="grid">
          <div class="left">
            <div class="card data">
              <div class="tit flexsc">{{ t('member.t1') }}</div>
              <div class="con">
                <!-- 修船厂、 制造商、 供应商 、航修/外协 -->
                <div
                  v-if="['07', '09', '10', '11'].includes(info.customerClassCode)"
                  class="item flexsc"
                >
                  <img src="@/assets/img/icon_104.png" />
                  <div class="star">
                    <template v-for="n in 5">
                      <img
                        src="@/assets/img/icon_shoucang_pre.png"
                        v-if="n <= info.ratingStar"
                      />
                      <img
                        src="@/assets/img/icon_shoucang_nor.png"
                        v-else
                      />
                    </template>
                  </div>
                </div>
                <div class="item flexsc">
                  <img src="@/assets/img/icon_yonghuming.png" />
                  <div>{{ info.countryName }} - {{ info.continentName }}</div>
                </div>
                <div class="item flexsc">
                  <img src="@/assets/img/icon_dizhi.png" />
                  <div>{{ info.address }}</div>
                </div>

                <!-- 船东、船管 -->
                <div
                  v-if="['05', '06'].includes(info.customerClassCode)"
                  class="item flexsc"
                >
                  <div>{{ t('organizationStructure.Information.p2') }}：{{ info.shipsNum }}</div>
                </div>

                <!-- 修船厂 -->
                <template v-if="['07'].includes(info.customerClassCode)">
                  <div class="item flexsc">
                    <img src="@/assets/img/icon_101.png" />
                    <div>{{ t('shipyard.a1') }}：{{ info.dockNum || 0 }}</div>
                  </div>
                  <div class="item flexss">
                    <img src="@/assets/img/icon_102.png" />

                    <div style="display: grid; grid-template-columns: auto auto; gap: 10px">
                      <div>{{ t('shipyard.a2') }}:</div>
                      <div>
                        <div
                          v-for="(item, index) in info.dockInfoList"
                          :key="index"
                        >
                          {{ item.dockLength }}(M) * {{ item.dockWidth }}(M) * {{ item.dockDeep }}(M)
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="item flexsc">
                    <img src="@/assets/img/icon_100.png" />
                    <div>{{ t('shipyard.a3') }}: {{ info.terminalLength }}(M)</div>
                  </div>
                  <div class="item flexsc">
                    <img src="@/assets/img/icon_99.png" />
                    <div>{{ t('organizationStructure.Information.p13') }}: {{ info.businessIntroduce }}</div>
                  </div>
                </template>

                <!-- 制造商 -->
                <template v-if="['09'].includes(info.customerClassCode)">
                  <div class="item flexsc">
                    <div>{{ t('organizationStructure.Information.p7') }}: {{ info.ccsNum }}</div>
                  </div>
                  <div class="item flexsc">
                    <div>{{ t('organizationStructure.Information.p8') }}: {{ info.mainProduct }}</div>
                  </div>
                  <div class="item flexsc">
                    <div>{{ t('organizationStructure.Information.p9') }}: {{ info.enterpriseNature }}</div>
                  </div>
                </template>

                <!-- 供应商 、航修/外协 、 船员派遣公司-->
                <div
                  v-if="['10', '11', '14'].includes(info.customerClassCode)"
                  class="item flexsc"
                >
                  <div>{{ t('organizationStructure.Information.p10') }}: {{ info.serviceScope }}</div>
                </div>

                <!-- 造船厂 -->
                <template v-if="['08'].includes(info.customerClassCode)">
                  <div class="item flexsc">
                    <div>{{ t('organizationStructure.Information.p11') }}: {{ info.shipbuildingCapacity }}</div>
                  </div>
                  <div class="item flexsc">
                    <div>{{ t('organizationStructure.Information.p12') }}: {{ info.shipbuildingType }}</div>
                  </div>
                </template>

                <!-- 船员派遣公司 -->
                <div
                  v-if="['14'].includes(info.customerClassCode)"
                  class="item flexsc"
                >
                  <div>{{ t('organizationStructure.Information.p16') }}: {{ info.qualifications }}</div>
                </div>

                <div class="item flexsc">
                  <div>{{ t('organizationStructure.Information.p17') }}: {{ info.numberOfServices || 0 }}</div>
                </div>
              </div>
            </div>
            <div class="card album mt-3">
              <div class="tit flexsb">
                <div class="flexsc">{{ t('member.t2') }}</div>
                <div class="flexec">
                  <!-- <div class="g-more">{{ t('more') }}</div> -->
                </div>
              </div>
              <div class="con">
                <div
                  class="item"
                  v-for="(item, index) in albumList"
                  :key="index"
                >
                  <img :src="item" />
                </div>
              </div>
            </div>
          </div>
          <!--  -->
          <div class="right card">
            <div class="tit flexsc">{{ t('member.t3') }}</div>
            <div
              class="item"
              v-for="item in trendsListData"
              :key="item.id"
            >
              <!-- <div class="time">2023 .05.23 Like Article</div> -->
              <div class="title mt-1">{{ dateFormat(item.createTime, 2) }} {{ item.trendsTitle }}</div>

              <div class="content noscrollbar">
                {{ item.isShowMore ? item.trendsSummary : toText(item.trendsSummary, 150) }}
                <span
                  v-if="item.trendsSummary?.length > 150"
                  class="show-more"
                  @click="item.isShowMore = !item.isShowMore"
                >
                  {{ item.isShowMore ? t('blog.b2') : `...${t('blog.b1')}` }}
                </span>
              </div>
              <div class="imglist mt-1 flexsc">
                <el-image
                  v-for="(url, index) in item.imgList"
                  :src="url"
                  :preview-src-list="item.imgListAll"
                  :initial-index="index"
                  fit="cover"
                />
                <div
                  class="more flexcc"
                  v-if="item.imgListAll.length > 6"
                >
                  {{ `+${item.imgListAll.length - 6}` }}
                </div>
              </div>
            </div>

            <div class="flexcc mt-3">
              <el-pagination
                layout="prev, pager, next"
                :hide-on-single-page="total <= page.pageSize"
                :total="total"
                v-model:current-page="page.pageNum"
                :page-size="page.pageSize"
                @current-change="handleCurrentChange"
              >
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, onBeforeMount } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { getOrganization } from '@/service/organizationStructure'
import { queryAlbum, getTrendsList as getTrendsListApi } from '@/service/organizationStructure'
import { dateFormat, toText } from '@/utils'
import useDialogue from '@/stores/dialogue'

const router = useRouter()
const route = useRoute()
const { t, locale } = useI18n()

const id = route.query.id

watch(locale, () => {
  init()
})

onBeforeMount(() => {
  init()
})

//
const info = ref(null)
const getInfo = () => {
  getOrganization(id).then(({ data }) => {
    info.value = data
  })
}

const storeDialogue = useDialogue()
const { setDialogVisible, setActivePerson } = storeDialogue

// 发消息
const handelSendMsg = () => {
  if (!info.value) return
  setDialogVisible(true)
  setActivePerson({
    customerName: info.value.adminUserName,
    customerId: info.value.adminUserId
  })
}

//获取相册
const albumList = ref([])
const getAlbum = () => {
  queryAlbum({
    businessType: 1,
    businessId: id,
    pageSize: 9,
    pageNum: 1
  }).then((res) => {
    albumList.value = res.data
  })
}

// 动态
const page = ref({
  pageNum: 1, // 当前页码
  pageSize: 6 // 每页条数
})
const total = ref(0) // 总数
const trendsListData = ref([])
const getTrendsList = () => {
  getTrendsListApi({
    pushType: 1,
    enterpriseId: id,
    ...page.value
  }).then(({ rows, total: tot }) => {
    rows.forEach((item) => {
      item.isShowMore = false
      item.imgList = item.summaryImage?.split(',')?.slice(0, 6)
      item.imgListAll = item.summaryImage?.split(',') || []
    })
    trendsListData.value = rows
    total.value = tot
  })
}
// 分页
const handleCurrentChange = (val) => {
  getTrendsList()
}

const init = () => {
  getInfo()
  getAlbum()
  getTrendsList()
}
</script>

<style scoped lang="scss">
.shipyard {
  .head {
    padding-bottom: 15px;
    .banner {
      img {
        display: block;
        width: 100%;
        height: 180px;
      }
    }
    .head-portrait {
      margin-top: -80px;
      margin-left: 25px;
      img {
        width: 160px;
        height: 160px;
        border: 2px solid #fff;
        border-radius: 50%;
        display: block;
        background: #fff;
      }
    }
    .name {
      font-weight: bold;
      font-size: 24px;
    }
    .btn {
      .el-button {
        height: 44px;
        text-transform: uppercase;
        font-weight: bold;
      }
    }
  }

  .main {
    background: #f5f5f5;
    padding: 30px 0 50px;
    margin-bottom: -76px;
    .grid {
      display: grid;
      grid-template-columns: 410px auto;
      gap: 21px;
    }
    .card {
      background: #fff;
      border-radius: 4px;
    }
    .left {
      width: 410px;
      .tit {
        padding: 0 29px;
        height: 70px;
        border-bottom: 1px solid #eaebec;
        font-size: 18px;
        font-weight: bold;
      }
      .con {
        padding: 25px 26px;
        color: #6a6973;
      }
      .data {
        .item {
          &:not(:last-of-type) {
            margin-bottom: 16px;
          }
          > img {
            margin-right: 11px;
          }
          .star {
            img {
              margin-right: 5px;
            }
          }
        }
      }
      .album {
        .con {
          display: grid;
          grid-template-columns: repeat(3, 112px);
          grid-template-rows: repeat(3, 112px);
          gap: 10px;
          .item {
            background: #6a6973;
            img {
              width: 100%;
              height: 100%;
              object-fit: contain;
            }
          }
        }
      }
    }

    .right {
      padding: 0 33px 30px;
      > .tit {
        height: 70px;
        font-size: 20px;
        color: #ca2a02;
        text-transform: uppercase;
        border-bottom: 2px solid #212121;
        font-weight: bold;
      }

      > .item {
        background: #f5f5f5;
        padding: 25px;
        margin-top: 23px;
        .time {
          color: #9d9fa5;
        }
        .title {
          font-size: 20px;
          font-weight: bold;
          color: #252628;
        }
        .text {
          color: #6a6973;
          font-size: 16px;
          line-height: 1.6;
        }

        .imglist {
          .el-image {
            width: 100px;
            height: 100px;
            background: #eaebec;
            margin-right: 14px;
            margin-bottom: 5px;
          }
          .more {
            width: 100px;
            height: 100px;
            background: rgba(0, 0, 0, 0.3);
            margin-left: -114px;
            position: relative;
            z-index: 9;
            color: #fff;
            font-size: 28px;
            pointer-events: none;
          }
        }
      }
    }
  }
}
</style>
